<template>
  <div>
    <div class="recommend-title">周末去哪儿</div>
    <ul>
      <li class="item"
          v-for="item of weekendList"
          :key="item.id"
      >
        <div class="item-img-wraper">
          <img class="item-img" :src="item.imgUrl" alt="">
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<style lang="stylus" scoped>
  //  为了解决3g下的网络加载问题，防止明显的拖动，因此轮播外面包裹一个明显的DIV
  //  并且DIV大小要和图片比例一致
  //   这是修改轮播点的样式，具体是看浏览器里面的CSS样式
  // 然后修改，，这是穿透写法
  @import "~styles/mixins.styl"

  /*  还是用弹性盒子布局好得很多，方便，又好使用   */
  .recommend-title
    margin-top :.2rem
    line-height :.8rem
    background :#f4f2f2
    /*  缩进 */
    text-indent :.2rem
  .item
    /*background :red*/
    /*overflow :hidden*/
    /*height:2.4rem*/
    .item-img-wraper
      overflow :hidden
      height :0
      /* 这里是用来占据比率的，用来撑开盒子 */
      padding-bottom: 37.4375%
      .item-img
        width: 100%;
    .item-info
      /* 这是剩余空间的的占据比率，flex的值全部加起来就好了  */
      flex :1
      padding:.2rem
      /* 这是出现...文本做的东西 给盒子设定一个宽度， */
      /* text-overflow: ellipsis 才会生效 */
      min-width:0
    .item-title
      height: .44rem
      color: #212121
      font-size: .32rem
      line-height: .44rem
      /* 这是文本裁剪，多余文本隐藏。不换行  */
      ellipsis()
    .item-desc
      padding:.1rem 0
      color: #616161;
      font-size: .22rem;
      line-height: .32rem;
      vertical-align: text-bottom
      ellipsis()

</style>
<script>
export default {
  name: 'HomeWeekend',
  data () {
    return {
      weekendList2: [
        {
          id: '0001',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1606/35/177a89a2b3a1e5.jpg_r_640x214_ba0ef2d4.jpg',
          title: '清凉撒欢好去处',
          desc: '这个夏天，周边消暑好去处'
        },
        {
          id: '0002',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1505/ae/11f076c6cb7c47.jpg_r_640x214_6f643489.jpg',
          title: '张家界必游TOP10',
          desc: '到张家界最值得游玩的地方'
        },
        {
          id: '0003',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1505/fb/302620ed8350f8.jpg_r_640x214_25a07cb4.jpg',
          title: '长沙必游TOP10',
          desc: '到了长沙，一定要到这些地方走走'
        },
        {
          id: '0004',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1603/56/33894ef918e1a8.jpg_r_640x214_a9de6b4e.jpg',
          title: '湘西必游TOP10',
          desc: '神奇山水风光，浓郁民俗风情'
        },
        {
          id: '0005',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1505/39/d61194f054f1f4.jpg_r_640x214_03da9c61.jpg',
          title: '这里是休闲天堂',
          desc: '游仙，忘情，休性，问踪'
        }
      ]
    }
  },
  props:{
    weekendList:{
      type:Array
    }
  }
}
</script>
